<template>  
    <div class="app-container">
      <el-form 
      :model="queryParams"
      ref="queryForm"
      size="small"
      v-show="showSearch"
      label-width="0px"
      >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="" prop="serialCode">
          <el-input
            v-model="queryParams.serialCode"
            placeholder="预算申请表编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="budgetProjectCode">
          <el-input
            v-model="queryParams.budgetProjectCode"
            placeholder="预算项目编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item>
                <el-select
                filterable
                    v-model="queryParams.category"
                    placeholder="类别（预算大类）"
                    clearable
                    size="small"
                    style="width:100%"
                    @keyup.enter.native="handleQuery"
                    
                >
                 <el-option
                    v-for="(item,index) in CategoryList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-col>
             <el-col :span="6">
            <el-form-item label="" prop="budgetProjectName">
              <el-input
                v-model="queryParams.budgetProjectName"
                placeholder="预算项目名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
        </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="budgetSource">
              <el-input v-model="queryParams.budgetSource"
              size="small" 
              placeholder="预算来源" 
              clearable
              @keyup.enter.native="handleQuery">
              </el-input>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="budgetTotalAmount">
                <el-input 
                    v-model="queryParams.budgetTotalAmount"
                    placeholder="预算总金额"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="budgetBalance">
                <el-input 
                    v-model="queryParams.budgetBalance"
                    placeholder="预算余额"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item>
                <el-select
                    v-model="queryParams.executingDepartment"
                    placeholder="执行部门"
                    clearable
                    size="small"
                    style="width:100%"
                    @keyup.enter.native="handleQuery"
                >
                 <el-option
                    v-for="(item,index) in departmentList"
                    :key="index"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="executionPeriod">
                <el-input
                    v-model="queryParams.executionPeriod"
                    placeholder="执行期数"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="executionDeadline">
                <el-input
                    v-model="queryParams.executionDeadline"
                    placeholder="执行期限"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        </el-row>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
      
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleExport"
          :disabled="multiple"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
      
    <el-table ref="multipleTable" v-loading="loading" :data="leaveFinishedList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed/>
      <el-table-column type="index"  fixed width="55" label="序号" align="center" />
      <el-table-column label="预算执行申请表编号" align="center" fixed prop="serialCode" width="200" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-link type="primary" @click="handleFlowRecord(scope.row)">{{scope.row.serialCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="预算项目编号" align="center" fixed prop="budgetProjectCode"  width="150" :show-overflow-tooltip="true"  />
      <el-table-column label="类别（预算大类）" align="center"  prop="category" width="230" :show-overflow-tooltip="true" />
      <el-table-column label="分类（预算子类）" align="center" prop="classify"  width="230" :show-overflow-tooltip="true" />
      <el-table-column label="预算总金额" align="center" prop="budgetTotalAmount" width="100" :show-overflow-tooltip="true"  />
      <el-table-column label="预算来源" align="center" prop="budgetSource" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="预算余额" align="center" prop="budgetBalance" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="合同金额" align="center" prop="contractAmount" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="合同执行金额" align="center" prop="contractExecutionAmount" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="合同执行余额" align="center" prop="contractExecutionBalance" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="执行项目名称" align="center" prop="executionProjectName" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="执行部门" align="center" prop="executingDepartment" width="100" :show-overflow-tooltip="true"  />
      <el-table-column label="执行期数" align="center" prop="executionPeriod" width="100" :show-overflow-tooltip="true"  />
      <el-table-column label="执行期限" align="center" prop="executionDeadline" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="历史执行金额" align="center" prop="historicalExecutionAmount" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="本次执行金额" align="center" prop="currentExecutionAmount" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="执行状态" align="center" prop="executionStatus" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="执行日期" align="center" prop="executionDate" width="150" :show-overflow-tooltip="true" />
      <el-table-column label="预算项目名称"  align="center" prop="budgetProjectName" width="110" :show-overflow-tooltip="true"  />
      <!-- <el-table-column label="本预算项目编号" sortable align="center" prop="budgetProjectCode"  width="200" :show-overflow-tooltip="true"  /> -->
      
      <!-- <el-table-column label="额度" sortable align="center" prop="budget" width="180" /> -->
      <el-table-column label="申请状态" align="center" prop="approvalStatus" width="150" :show-overflow-tooltip="true" />
      <el-table-column label="申请日期" sortable align="center" prop="applyForTime" width="150" />
        <el-table-column label="创建日期" sortable align="center" prop="createTime" width="150" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="90" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleFlowRecord(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
</template>

<script>
import { officeTodoList, deptListAll,mytodoSelectStatus } from "@/api/administeration/askForLeave.js";
import { officeFinishedList } from '@/api/administeration/askForLeave.js';
import { BudgetCategory,budget_department,BudgetFinishedExport } from "@/api/financial/budgetExecution"
export default {
    name: 'budgetFinished',
    data() {
      return {
        // 选中的数组
        ids: [],
          // 遮罩层
        loading: false,
          // 数据表格
        leaveFinishedList: [],
          // 表格条数
        total: 0,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
          showSearch: true,
          // 查询条件
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          serialCode: null,
          budgetProjectCode: null,
          budgetProjectName: null,
          category: null,
          budgetSource: null,
          budgetTotalAmount: null,
          budgetBalance: null,
          executingDepartment: null,
          executionPeriod: null,
          executionDeadline: null
        },
            deptOptions: [],
            sourcesList: [],
            departmentList: [],
            CategoryList: [],
            Code: 'CODE_YS'
        }
    },
    activated () {
      this.getList()
    // this.getDeptListAll()
    },
    created() {
      this.getList()
      // this.getDeptListAll()
      // this.getSelectStatus()
    },
    methods: {
      // 部门查询
      inItPage() {
        budget_department().then(res => {
          for(let i = 0;i<res.data.length;i++){
            this.departmentList.push(res.data[i].dictLabel)
          }
        })
      },
      // 预算大类
      category() {
        BudgetCategory().then(res => {
          this.CategoryList = res.data
        })
      },
           // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.budgetProjectCode);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
      handleExport() {
        let list = [];
      if(this.ids.length > 0){
        this.ids.forEach(ele => {
         let  obj = this.leaveFinishedList.find(item => item.budgetProjectCode==ele);
          list.push(obj)
        });
        console.log(list,"88888888888888");
        BudgetFinishedExport(list).then(res=>{
          if(res){
          const blob = new Blob([res],{type: 'application/vnd.ms-excel'});
          const fileName ="预算执行已办表.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
            this.$refs.multipleTable.clearSelection();
          }

       })

      }
      },
    
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.queryParams = {
            pageNum: 1,
              pageSize:10,
              serialCode: null,
              budgetProjectCode: null,
              budgetProjectName: null,
              category: null,
              budgetSource: null,
              budgetTotalAmount: null,
              budgetBalance: null,
              executingDepartment: null,
              executionPeriod: null,
              executionDeadline: null
          }
          // this.resetFormData("queryForm");
          this.handleQuery();
      },
      // 列表
      getList() {
        this.loading = true
        officeFinishedList({ ...this.queryParams},this.Code).then(
          response => {
            this.leaveFinishedList = response.rows;
            this.total = response.total;
             this.loading = false;
          }
        );
        this.category()
        this.inItPage()
      },
      /** 流程流转记录 */
    handleFlowRecord(row){
      this.$router.push({
        path: '/workflow/process/financeformdetail/' + row.procInstId,
        query: {
          processed: false
        }
      })
    },
    }
}
    
</script>

<style lang="less" scoped>

</style>